散点图

一个最简单的散点图的配置中需要包括一个grid、两个axis分别为x和y，以及series中的scatter，示例如下，可在官网中直接运行

        myChart = D3Charts.init('chart');

        var arr = [];

        for (var i = 1; i < 32; i++) {
            arr.push([Math.random() * 24 * 32 * i, Math.random() * 200 + 300, Math.random() * 400 + 50]);
        }

        myChart.setOption({
            grid: {},
            series: [
                {
                    type: 'scatter', // 图表类型
                    data: arr, // 数据
                    symbol: {
                        normal: {
                            show: true,
                            size: function (d) { // 设置点大小
                                return Math.sqrt(d[2])
                            },
                            style: {
                                fill: '#2C82BE'
                            }
                        }
                    }
                }
            ],
            // dataZoom: [
            //     {
            //     },
            //     {
            //         orient: 'vertical'
            //     }
            // ],
            axis: [
                {
                    position: 'bottom', // axis的放置位置
                    type: 'linear', // axis的类型
                    // $dataZoomIndex: 0 // 被第0个dataZoom所控制
                },
                {
                    position: 'left', // axis的放置位置
                    type: 'linear', // axis的类型
                    xOrY: 'y', // 作为y轴，默认为x轴
                    // $dataZoomIndex: 1 // 被第1个dataZoom所控制
                }
            ],
            // tooltip: {
            //     formatter: function(item) {
            //         var d = item.series[0].value;
            //         return d[0].toFixed(1) + ', ' + d[1].toFixed(1) + ', ' + d[2].toFixed(1)
            //     }
            // }
        });

组件详细配置项如下，每个配置项都有一个默认值：

        //data: undefined, // {Array} 系列中的数据内容数组。数组项通常为具体的数据项。数据项格式同echarts类似，http://echarts.baidu.com/option.html#series-scatter.data
        $dataIndex: undefined, // {number} 依赖的$data的index，格式同上，优先级低于data，取得的数据需符合data的格式
        dataKey: undefined, // {string|number} 搭配$dataIndex使用，方便从依赖的$data中取数据，等同于 data.map((d) => d[dataKey])，最终取得的数据需符合data的格式
        $axisIndex: [0, 1], // {Array} 所依赖axis的index，需包括一个x轴和y轴
        name: undefined, // {string} 系列名称，用于tooltip的显示，legend 的图例筛选

        // 拐点标记
        symbol: {
            // 普通状态
            normal: {
                show: true, // {boolean|string} 是否显示拐点标记， true 显示坐标轴对应点 | false 不显示 | 'all' 显示全部
                type: 'circle', // {string} symbol类型 'line' | 'rect' | 'roundRect' | 'square' | 'circle' | 'diamond' | 'pin' | 'arrow' | 'triangle'
                offset: [0, 0], // {Array} [x, y]，偏移位置
                size: 8, // {number} symbol大小
                // 普通样式
                style: {}
            },
            // 高亮状态
            emphasis: {
                show: false, // {boolean} 是否显示高亮显示
                // 高亮样式
                style: {}
            }
        },

        // 拐点上方的文本
        label: {
            // 普通状态
            normal: {
                show: false, // {boolean|string} 是否显示拐点上方值， true 显示坐标轴对应点 | false 不显示 | 'all' 显示全部
                // 普通样式
                style: {
                    position: 'top'
                },
                formatter: undefined // {Function} 文本格式化函数
            },
            emphasis: {
                show: false, // {boolean} 是否高亮显示
                // 高亮样式
                style: {}
            }
        },

        onClick: undefined, // {Function} 单击事件
        onDBLClick: undefined, // {Function} 双击事件
        selectedList: [], // {Array} 选中项，使用数据下标指定
        enableSelect: false, // {boolean|string} 是否开启选中, single(true) | multiple | false
        legendHoverLink: true, // {boolean} 是否与图例进行高亮联动
        whenEmphasisZ: 99999, // {number} 高亮时图形z值
        offset: 0, // {number} 适用于单轴散点图，距离单轴的距离

        cursor: 'default', // {string} 鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
        zlevel: 0, // {number} 所有图形的 zlevel 值
        z: 4, // {number} 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
        animation: true, // {boolean} 是否开启动画。
        animationDuration: 500, // {number} 初始动画的时长
        animationEasing: 'cubicOut' // {string} 初始动画的缓动效果。不同的缓动效果可以参考 http://www.echartsjs.com/gallery/editor.html?c=line-easing。